<template>
  <div>
    <p>name {{ name }}</p>
    <p>role {{ role }}</p>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    // step1：定义响对
    const state = reactive({
      name: "雷蒙多：又累又萌的小多多",
      role: "菊花Mate60宣传大使",
    });

    // step2：toRefs 变成一堆Ref（的合集）
    const refsObj = toRefs(state);

    return {
      // step3：ref合集打散
      ...refsObj,
    };
  },
};
</script>

<style lang="scss" scoped></style>
